<template>
  <div class="table-box">
    <ProTable ref="proTable" :columns="columns" :request-api="queryMyMediumRecordList">
      <!-- 表格 header 按钮 -->
      <template #tableHeader>
        <el-button type="primary" :icon="CirclePlus" @click="openInsertDialog">媒介记录填报</el-button>
      </template>
      <template #createDate="scope">
        {{ scope.row.createDate.replace("T", " ").split(".")[0] }}
      </template>
      <template #publishDate="scope">
        {{ scope.row.publishDate.replace("T", " ").split(".")[0] }}
      </template>
      <!-- 表格操作 -->
      <template #operation="scope">
        <el-button type="primary" link :icon="EditPen" @click="openUpdateDialog(scope.row)"> 编辑 </el-button>
      </template>
    </ProTable>
    <!-- 新增对话框 -->
    <el-dialog width="30%" title="创建新媒介记录" v-model="insertDialogVisible">
      <el-form ref="insertFormRef" :model="insertParam" :rules="ruleForm" label-width="150px" class="demo-ruleForm">
        <el-form-item label="所属PO记录单号" prop="SourceProjectRecordNumber">
          <el-input v-model="insertParam.SourceProjectRecordNumber"></el-input>
        </el-form-item>
        <el-form-item label="媒介记录名称" prop="mediumRecordName">
          <el-input v-model="insertParam.mediumRecordName"></el-input>
        </el-form-item>

        <el-form-item label="发布时间">
          <el-date-picker v-model="insertParam.publishDate" type="datetime"></el-date-picker>
        </el-form-item>
        <el-form-item label="发布平台">
          <el-input v-model="insertParam.publishPlatform"></el-input>
        </el-form-item>

        <el-form-item label="发布类型" prop="publishType">
          <el-radio-group v-model="insertParam.publishType">
            <el-radio :label="1" :value="1">文章</el-radio>
            <el-radio :label="2" :value="2">视频</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="发布状态" prop="recordType">
          <el-radio-group v-model="insertParam.publishState">
            <el-radio :label="0" :value="0">待发布</el-radio>
            <el-radio :label="1" :value="1">已发布</el-radio>
            <el-radio :label="-1" :value="-1">发布失败</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="发布失败原因">
          <el-input v-model="insertParam.publishFailReason" type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="insertDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="addMediumRecord(insertFormRef)">创建</el-button>
        </span>
      </template>
    </el-dialog>

    <!-- 修改对话框 -->
    <el-dialog width="30%" title="修改媒介记录" v-model="updateDialogVisible">
      <el-form ref="updateFormRef" :model="updateParam" :rules="ruleForm" label-width="150px" class="demo-ruleForm">
        <el-form-item label="所属PO记录单号" prop="SourceProjectRecordNumber">
          <el-input v-model="updateParam.SourceProjectRecordNumber"></el-input>
        </el-form-item>
        <el-form-item label="媒介记录名称" prop="mediumRecordName">
          <el-input v-model="updateParam.mediumRecordName"></el-input>
        </el-form-item>

        <el-form-item label="发布时间" prop="publishDate">
          <el-date-picker v-model="updateParam.publishDate" type="datetime"></el-date-picker>
        </el-form-item>

        <el-form-item label="发布类型" prop="publishType">
          <el-radio-group v-model="updateParam.publishType">
            <el-radio :label="1" :value="1">文章</el-radio>
            <el-radio :label="2" :value="2">视频</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="发布状态" prop="publishState">
          <el-radio-group v-model="updateParam.publishState">
            <el-radio :label="0" :value="0">待发布</el-radio>
            <el-radio :label="1" :value="1">已发布</el-radio>
            <el-radio :label="-1" :value="-1">发布失败</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="发布失败原因">
          <el-input v-model="updateParam.publishFailReason" type="textarea"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="updateDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="updateMediumRecord(updateFormRef)"> 修改</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>
<script setup lang="ts" name="projectRecord">
import { ref, reactive, onMounted, nextTick } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import type { FormInstance, FormRules } from "element-plus";
import {
  CirclePlus,
  Delete,
  EditPen,
  Download,
  Upload,
  View,
  Refresh,
  ElementPlus,
  More,
  Picture
} from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import ProTable from "@/components/ProTable/index.vue";
import UploadImg from "@/components/Upload/Img.vue";
import { ProTableInstance, ColumnProps } from "@/components/ProTable/interface";
import { HxCustomers } from "@/api/interface/customers";
import { queryCustomers } from "@/api/modules/customers";

import { CreateCustomerProjectParam, CustomerProjectResult, EditCustomerProjectInfoParam } from "@/api/interface/customerProject";
import {
  createCustomerProject,
  editCustomerProjectInfo,
  editCustomerProjectStatus,
  findCustomerProjectInfo,
  queryMyCustomerProjectList
} from "@/api/modules/customerProject";
import {
  customerProjectStatusEnum,
  projectRecordStatusEnum,
  projectRecordTypeEnum,
  publishStateEnum,
  publishTypeEnum,
  statusFieldNames
} from "@/enums/httpEnum";
import { useRoute } from "vue-router";
import {
  createProjectRecord,
  editProjectREcordInfo,
  editProjectRecordStatus,
  queryProjectAllRecord
} from "@/api/modules/projectRecord";
import { CreateProjectRecordParam, EditProjectRecordInfoParam, HxCustomerProjectRecord } from "@/api/interface/projectRecord";
import { createMediumRecord, editMediumRecordInfo, queryMyMediumRecordList } from "@/api/modules/mediumRecord";
import { CreateMediumRecordParam, EditMediumRecordInfoParam, HxMediumRecord } from "@/api/interface/mediumRecord";

const proTable = ref<ProTableInstance>();

/** 新增对话框是否可见 */
const insertDialogVisible = ref(false);

/** 修改对话框是否可见 */
const updateDialogVisible = ref(false);

/** 新增表单Form */
const insertFormRef = ref<FormInstance>();

/** 修改表单Form */
const updateFormRef = ref<FormInstance>();

/** 新增初始化参数 */
const initInsertParam = {
  sourceCustomersProjectRecordId: "",
  mediumRecordName: "",
  publishDate: new Date(),
  quotePrice: 0,
  publishState: 1,
  publishType: 1,
  publishContent: ""
};

/** 新增参数 */
const insertParam = reactive<CreateMediumRecordParam>({
  SourceProjectRecordNumber: "",
  mediumRecordName: "",
  publishDate: new Date(),
  quotePrice: 0,
  publishState: 1,
  publishType: 1,
  publishContent: ""
});

/** 修改参数 */
const updateParam = reactive<EditMediumRecordInfoParam>({
  mediumRecordId: "",
  SourceProjectRecordNumber: "",
  mediumRecordName: "",
  publishDate: new Date(),
  quotePrice: 0,
  publishState: 1,
  publishType: 1,
  publishContent: ""
});

/** 客户列表 */
let customers = ref<HxCustomers[]>([]);

/** form表单验证规则 */
const ruleForm = reactive<FormRules>({
  SourceProjectRecordNumber: [{ required: true, message: "请输入媒介记录名称", trigger: "change" }],
  mediumRecordName: [{ required: true, message: "请输入媒介记录名称", trigger: "change" }],
  publishState: [{ required: true, message: "请选择发布类型", trigger: "change" }]
});

/** 表格配置项 */
const columns = reactive<ColumnProps<HxMediumRecord>[]>([
  { type: "selection", fixed: "left", width: 70 },
  { type: "index", label: "", width: 80 },
  {
    prop: "mediumRecordName",
    label: "媒介记录名称",
    width: 150,
    search: { el: "input", tooltip: "请输入媒介记录名称" }
  },
  {
    prop: "publishType",
    label: "发布类型",
    width: 200,
    tag: true,
    enum: publishTypeEnum,
    search: { el: "select", props: { filterable: true } },
    fieldNames: statusFieldNames
  },

  {
    prop: "publishState",
    label: "发布状态",
    width: 150,
    tag: true,
    enum: publishStateEnum,
    search: { el: "select", props: { filterable: true } },
    fieldNames: statusFieldNames
  },
  {
    prop: "publishPlatform",
    label: "发布平台",
    width: 150,
    tag: true
  },
  {
    prop: "publishDate",
    label: "发布时间",
    width: 150
  },
  {
    prop: "createDate",
    label: "创建时间",
    width: 200
  },
  {
    prop: "createUser",
    label: "创建人",
    width: 120
  },
  { prop: "operation", label: "操作", fixed: "right", width: 200 }
]);

/** 打开新增对话框 */
const openInsertDialog = async () => {
  insertDialogVisible.value = true;
};

/** 打开修改对话框 */
const openUpdateDialog = async (param: HxMediumRecord) => {
  updateDialogVisible.value = true;
  Object.assign(updateParam, param);
};

/** 新增媒介记录 */
const addMediumRecord = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      await createMediumRecord(insertParam);
      ElMessage.success("创建项目明细记录成功");
      insertDialogVisible.value = false;
      Object.assign(insertParam, initInsertParam);
      proTable.value?.getTableList();
    } else {
      ElMessage.error("请填入必填数据");
    }
  });
};

/** 修改媒介记录 */
const updateMediumRecord = async (formEl: FormInstance | undefined) => {
  if (!formEl) return;
  await formEl.validate(async (valid, fields) => {
    if (valid) {
      await editMediumRecordInfo(updateParam);
      ElMessage.success("修改项目明细记录成功");
      updateDialogVisible.value = false;
      Object.assign(insertParam, initInsertParam);
      proTable.value?.getTableList();
    } else {
      ElMessage.error("请填入必填数据");
    }
  });
};
</script>
